// ===============================
// Calculator 组件专属样式
// ===============================

.calculator-page {
	min-height: 100vh;
	background: var(--theme-content-bg);
	color: var(--theme-content-text);
	padding: 80px 0;

	.container {
		max-width: 1000px;
		margin: 0 auto;
	}

	.page-header {
		text-align: center;
		margin-bottom: 3rem;

		.page-title {
			font-size: 2.5rem;
			font-weight: 700;
			color: var(--theme-content-title);
			margin-bottom: 1rem;
			background: var(--theme-gradient-title);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			background-clip: text;
		}

		.page-subtitle {
			font-size: 1.2rem;
			color: var(--theme-content-text-muted);
			line-height: 1.6;
		}
	}

	.calculator-container {
		background: var(--theme-card-bg);
		border: 1px solid var(--theme-card-border);
		border-radius: 20px;
		padding: 2rem;
		box-shadow: var(--theme-card-shadow);
		backdrop-filter: var(--backdrop-blur);
	}
}

// ===============================
// Calculator 表单样式
// ===============================

.calc-form {
	.form-section {
		margin-bottom: 2rem;

		.section-title {
			font-size: 1.2rem;
			font-weight: 600;
			color: var(--theme-content-title);
			margin-bottom: 1rem;
			padding-bottom: 0.5rem;
		}
	}

	.form-group {
		margin-bottom: 1.5rem;

		label {
			display: block;
			margin-bottom: 0.5rem;
			color: var(--theme-content-text);
			font-weight: 500;
			font-size: 0.9rem;
		}

		select,
		input {
			width: 100%;
			padding: 0.75rem 1rem;
			border: 2px solid var(--theme-input-border);
			border-radius: 8px;
			background: var(--theme-input-bg);
			color: var(--theme-input-text);
			font-size: 1rem;
			transition: all 0.3s ease;

			&:focus {
				outline: none;
				border-color: var(--theme-accent);
				box-shadow: 0 0 0 3px rgba(100, 181, 246, 0.1);
			}

			&::placeholder {
				color: var(--theme-input-placeholder);
			}
		}

		.composition-inputs {
			display: grid;
			gap: 1rem;

			&.binary {
				grid-template-columns: 1fr;
			}

			&.ternary {
				grid-template-columns: repeat(3, 1fr);
			}

			.composition-input {
				.composition-label {
					font-size: 0.85rem;
					margin-bottom: 0.25rem;
				}
			}
		}
	}

	.calc-button {
		width: 100%;
		background: var(--theme-gradient-primary);
		color: white;
		border: none;
		border-radius: 12px;
		padding: 1rem 2rem;
		font-size: 1.1rem;
		font-weight: 600;
		cursor: pointer;
		transition: all 0.3s ease;
		box-shadow: 0 4px 15px rgba(100, 181, 246, 0.3);
		margin-top: 1rem;

		&:hover:not(:disabled) {
			transform: translateY(-2px);
			box-shadow: var(--theme-button-shadow-hover);
		}

		&:disabled {
			background: var(--theme-input-disabled-bg);
			color: var(--theme-input-disabled-text);
			cursor: not-allowed;
			box-shadow: none;
			transform: none;
		}

		&.loading {
			position: relative;

			.loading-spinner {
				display: inline-block;
				width: 20px;
				height: 20px;
				border: 2px solid rgba(255, 255, 255, 0.3);
				border-top: 2px solid white;
				border-radius: 50%;
				animation: spin 1s linear infinite;
				margin-right: 0.5rem;
			}
		}
	}
}

// ===============================
// 结果显示样式
// ===============================

.calc-result {
	margin-top: 2rem;

	.result-success {
		background: var(--theme-success-bg);
		border: 1px solid var(--theme-success-border);
		border-radius: 12px;
		padding: 1.5rem;

		.result-title {
			font-size: 1.2rem;
			font-weight: 600;
			color: var(--theme-success-text);
			margin-bottom: 1rem;
		}

		.result-value {
			font-size: 1.5rem;
			font-weight: 700;
			color: var(--theme-success-accent);
		}
	}

	.result-error {
		background: var(--theme-error-bg);
		border: 1px solid var(--theme-error-border);
		border-radius: 12px;
		padding: 1.5rem;

		.error-title {
			font-size: 1.2rem;
			font-weight: 600;
			color: var(--theme-error-text);
			margin-bottom: 0.5rem;
		}

		.error-message {
			color: var(--theme-error-text);
			font-size: 0.95rem;
		}
	}
}

// ===============================
// 响应式设计
// ===============================

@media (max-width: 768px) {
	.calculator-page {
		padding: 60px 0;

		.page-header {
			.page-title {
				font-size: 2rem;
			}

			.page-subtitle {
				font-size: 1rem;
			}
		}

		.calculator-container {
			padding: 1.5rem;
		}
	}

	.calc-form {
		.form-group {
			.composition-inputs {
				&.ternary {
					grid-template-columns: 1fr;
				}
			}
		}
	}
}

// ===============================
// 动画
// ===============================

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

// 进场动画
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.calculator-page {
	animation: fadeInUp 0.6s ease-out;
}

.calculator-container {
	animation: fadeInUp 0.8s ease-out 0.2s both;
}
